<template>
  <div class='specify-body'>
    <div class="search-box" v-if="$store.state.searchShow">
      <span>{{formaltData.searchInfo.title}}</span>
      <el-date-picker
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>

      <div class="more-search" v-if="formaltData.searchInfo.more">
        <div v-for="(item, index) in formaltData.searchInfo.more" :key="index">
          <span>{{item.label}}</span>
          <el-select v-model="item.value" placeholder="请选择">
            <el-option
              v-for="(opt,optIndex) in item.array"
              :key="optIndex"
              :label="opt.label"
              :value="opt.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <el-button type="primary" class="search-btn">搜索</el-button>
    </div>

    <!-- 表格批量操作 -->
    <div class="table-operate" v-if="formaltData.operates">
      <el-button v-for="(btn, btnIndex) in formaltData.operates" :key="btnIndex" class="ft12 btn">{{btn.label}}</el-button>
    </div>

    <div class="table-box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column v-for="(item, index) in formaltData.tableModel" :key="index" v-if="item.type==='index'" type="index" :label="item.label" :min-width="item.width"></el-table-column>
        <el-table-column
          v-else-if="item.isSelect"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column v-else-if="item.islabel" :prop="item.prop" :label="item.label" :min-width="item.width"></el-table-column>
        <el-table-column v-else-if="item.btns" :label="item.label" :min-width="item.width">
          <template slot-scope="scope">
            <div class="btn-box">
              <span v-for="(btn, btnIndex) in item.btns" v-if="(btn.status==0)||btn.show" :key="btnIndex" :class="btn.class" @click="doClick(btn,scope)">{{btn.label}}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Page class="page-info" :pageInfo="pageInfo" @changePage="changePage" />
  </div>
</template>
<script>
import Page from '@/components/page.vue'
export default {
  props:['tableModel0'],
  components: {Page},
  name: "",
  data() {
    return {
      tableData:[{},{},{},{},{},{},{},{},{},{},{},],
      pageInfo:{
        page:1,
        total:100
      }
    };
  },
  computed:{
    formaltData(){
      return this.tableModel0
    },
  },
  methods: {
    /**
     * @name 查看详情
     */
    showDetail(scope){
      let path = _g.getRouterPath(this) + '/detail'
      this.$router.push({path,query:{id:'测试id',status:"当前状态1"}})
    },
    doClick(btn,scope){
      if(btn.click){
        this[btn.click](scope)
      }
    },

    /**
     * @name 删除
     */
    doDel(scope){
      console.log("删除");
      
    },

    /**
     * @name 已读
     */
    doRead(){
      console.log("已读");
      
    },

    doNothing(){

    },

    /**
     * @name 设置默认地址
     */
    setAddress(){
      console.log("设置地址");
      
    },

    /**
     * @name 翻页
     */
    changePage(val){
      console.log("翻页");
      
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.specify-body {
  
  .search-box{
    font-size: 13px;
    margin: 15px 10px;
    display: flex;

    >span{
      margin-right: 10px;
      min-width: 70px;
      line-height: 40px;
      text-align: right;
    }

    .search-btn{
      width: 100px;
      margin-left: 10px;
    }
  }

  .table-operate{
    margin: 0 10px;

    .btn{
      padding: 7px 10px;
      border-radius: 0
    }
  }
  .table-box{
    padding: 10px;
  }
  .page-info{
    text-align: center;
    padding: 40px 0;
  }
  .btn-box{
    display: flex;
    justify-content: space-around;
  }
  .more-search{
    display: flex;

    >div{
      display: inherit;
      width: 150px;
      margin-left: 10px;

      >span{
        display: inline-block;
        min-width: 40px;
        line-height: 40px
      }
    }
  }
}
</style>